<template>
  <el-container class="news-container">
    <el-aside width="200px">
      <el-menu :default-active="nt" @select="selectNewsList" class="news-container-menu">
        <el-menu-item v-for="item of newsTypeList" :index="item.id">
          <span slot="title">{{ item.newsTypeName }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-row type="flex" justify="center">
        <el-col :span="20" class="news-div">
          <el-page-header @back="$router.go(-1)"></el-page-header>
          <div class="news-title">
            <p class="t1">{{ data.title }}</p>
            <p class="t2">发布时间：{{ data.createdTime }}; 来源：{{ data.meta }}; 浏览{{ data.lookNum }}次</p>
          </div>
          <div class="html-body" v-html="data.body"></div>
          <el-row type="flex" justify="space-between" align="bottom">
            <el-col :span="12">
              <el-button @click="last" size="small" v-if="lastNews">上一章</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-button @click="next" size="small" v-if="nextNews">下一章</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
  </el-container>

</template>

<script>

import {newsByNidImmune, newsTypeListImmune} from "@/api/operations-center/news";

export default {
  data() {
    return {
      skeletonLoading: true,
      newsTypeList: [],
      nt: '',
      data: {
        title: '??????',
        meta: '',
        lead: '',
        body: '',
        createdTime: '',
        lookNum: 0,
        collectNum: 0
      },
      lastNews: null,
      nextNews: null
    };
  },
  methods: {
    /**
     * {获取新闻}
     *
     * @author: 宋康
     * @date: 2022/8/30 16:16
     */
    queryNewsNow() {
      newsByNidImmune(this.$route.query.nt || '-1', this.$route.query.nid || '-1').then(res => {
        if (res.status && res.data) {
          let data = res.data;
          this.data.title = data.newsTitle;
          this.data.meta = data.createdUser.userName;
          this.data.body = data.newsBody;
          this.data.lead = data.newsLead;
          this.data.createdTime = data.createdTime;
          this.data.lookNum = data.lookNum;
          this.data.collectNum = data.collectNum;
          //
          this.lastNews = data.lastNews;
          this.nextNews = data.nextNews;
          //
          this.skeletonLoading = false;
        }
      })
    },
    /**
     * {上一篇}
     *
     * @author: 宋康
     * @date: 2022/8/30 16:29
     */
    last() {
      this.$router.push({
        path: "/news/NewsNational",
        query: {
          nid: this.lastNews.nid,
          nt: this.$route.query.nt
        }
      });
    },
    /**
     * {下一篇}
     *
     * @author: 宋康
     * @date: 2022/8/30 16:29
     */
    next() {
      this.$router.push({
        path: "/news/NewsNational",
        query: {
          nid: this.nextNews.nid,
          nt: this.$route.query.nt
        }
      });
    },
    /**
     * {点击新闻分类触发}
     *
     * @author: 宋康
     * @date: 2022/10/6 15:32
     */
    selectNewsList(index) {
      this.$router.push({
        path: '/news/National',
        query: {
          nt: index
        }
      });
    },
    /**
     * {获取新闻分类}
     *
     * @author: 宋康
     * @date: 2022/8/29 09:13
     */
    queryNewsType() {
      newsTypeListImmune().then(res => {
        if (res.status) {
          this.newsTypeList = res.data;
        }
      })
    },
  },
  mounted() {
    this.queryNewsNow();
    this.nt = this.$route.query.nt || '-1';
    this.queryNewsType();
  },
  watch: {
    $route() {
      this.queryNewsNow();
    },
  }
};
</script>

<style lang="scss" scoped>
.news-container {
  margin: 25px 0;
  background-color: #ffffff;
  min-height: 600px;
}


.news-div {
  margin: 0;
  padding: 0 0 30px 0;
}

.news-title {
  padding: 4px 0;
  text-align: center;
  background: #f2f2f2;
  border-radius: 5px;

  .t1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
  }

  .t2 {
    color: #aaa;
    margin: 3px 0;
  }
}

.html-body {
  min-height: 300px;
  margin: 10px 0;
}

.go-back {
  position: absolute;
  float: left;
  left: 50px;
  font-size: 16px;
  color: #706c6c;

  &:hover {
    cursor: pointer;
  }
}

.news-container-menu {
  border-radius: 5px;
  text-align: center;

  &::v-deep.el-submenu__title {
    border-radius: 5px;
  }

  .el-menu-item {
    border-radius: 5px;
  }
}
</style>
